<template>
    <!--    碰撞悬浮广告-->
    <div class="floatLayer">
        <a class="close-btn" href="javascript:;" @click.stop="closeView">×</a>
        <div class="imgBox">
                    <img  :src="constUrl+json.src" alt="">
            <p>
                <span>{{json.title}}</span>
            </p>
        </div>

    </div>
</template>
<script>
    import constUrl from "@/services/env";

    export default{
        data(){
            return{
                object: [],
                left:0,
                top:0,
                constUrl,
                interval:30,
                distance:2,
                directionX:1,
                directionY:1,
                zIndex:100,
                target:"_blank",
                cursor:"pointer",
                i:0
            }
        },
        props:['json'],
        mounted(){
        },
        methods:{
            closeView(){
                this.$emit("closeView");
            },
            init(json){
                var obj = document.querySelector(".floatLayer");
                //自定义
                obj.left=parseInt(json.left || this.left);
                obj.top = parseInt(json.top || this.top);
                obj.interval = json.interval || this.interval;
                obj.distance = json.distance || this.distance;
                obj.directionX = json.directionX || this.directionX;
                obj.directionY = json.directionY || this.directionY;
                obj.index = this.object.length;
                obj.url = json.url;
                obj.target = json.target || this.target;
                obj.t=null;
                //事件
                if (obj.url ){
                    obj.onclick = function () {
                        switch (this.target) {
                            case "_blank":
                                open(this.url);
                                break;
                            case "_parent":
                                parent.location = this.url;
                            case "_top":
                                top.location = this.url;
                                break;
                            case "_self":
                                location = this.url;
                                break;
                        }
                    }
                }
                if (!json.noHoverPause) {
                    obj.onmouseover = function () {
                        clearInterval(this.t);
                    }
                    obj.onmouseout = function () {
                        obj.t=setInterval(function(){that.float(obj.index)}, obj.interval);
                    }
                }
                obj.src = json.src;
                obj.style.cursor = json.cursor || this.cursor;
                obj.style.position = "absolute";
                obj.style.left = obj.left + "px";
                obj.style.top = obj.top + "px";
                obj.style.zIndex = json.zIndex || this.zIndex;
                obj.style.width = json.width || "";
                obj.style.height = json.height || "";
                obj.style.directionX=json.directionX || this.directionX;
                obj.style.directionY=json.directionY || this.directionY;
                this.object.push(obj);
                document.body.appendChild(obj);
                let that=this;
                obj.t=setInterval(function(){that.float(obj.index)}, obj.interval);
            },
            float(index) {
                var pageWidth = document.documentElement.clientWidth;
                var pageHeight = document.documentElement.clientHeight;
                var scrollLeft = document.documentElement.scrollLeft;
                var scrollTop = document.documentElement.scrollTop;

                var obj = this.object[index];

                obj.left = obj.left + obj.directionX * obj.distance;
                if (obj.left <= scrollLeft) {
                    obj.left = scrollLeft;
                    obj.directionX = 1;
                }
                if (obj.left + obj.offsetWidth >= pageWidth + scrollLeft - 1) {
                    obj.left = pageWidth + scrollLeft - 1 - obj.offsetWidth;
                    obj.directionX = -1;
                }

                obj.top = obj.top + obj.directionY * obj.distance;
                if (obj.top <= scrollTop) {
                    obj.top = scrollTop;
                    obj.directionY = 1;
                }
                if (obj.top + obj.offsetHeight >= pageHeight + scrollTop - 1) {
                    obj.top = pageHeight + scrollTop - 1 - obj.offsetHeight;
                    obj.directionY = -1;
                }

                obj.style.left = obj.left + "px";
                obj.style.top = obj.top + "px";
            }

        }
    }
</script>
<style>
    .floatLayer{
        position:fixed;
        left:0;
        top:0;
        width: 15vw;
        height:12vw;
        z-index:999;
    }
    .close-btn{
        display:block;
        position:absolute;
        right:0px;
        top:0px;
        width:40px;
        height:40px;
        line-height:40px;
        text-align: center;
        overflow:hidden;
        font-size: 30px;
        background:#ccc;
        color:#fff;
        z-index:110;
    }
    .close-btn:hover{
        color:#B50900;
        background:#ccc;
    }
    .floatLayer p{
        width: 100%;
        height: 50px;
        z-index:101;
        left: 0;
        position:relative;

    }
    .floatLayer .imgBox{
        position:relative;
        top: 0;
        z-index:101;
        left: 0;
        bottom: 0;
        width: 15vw;
        height:12vw;
        right:0px;
        top:0px;
    }
    .floatLayer .imgBox img{
        width: 100%;
        height: 100%;
    }
    .floatLayer .imgBox p{
        position:absolute;
        z-index:105;
        left: 0;
        width: 15vw;
        height:2vw;
        right:0px;
        bottom:0px;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 2vw;

    }
    .floatLayer p span{
        color: white;
    }
</style>